<template>
  <label>图片数量
    <input type="number" v-model="refreshMxg.imgSize">
  </label>
  <label>
    <input type="checkbox" v-model="refreshMxg.freeProportion">自由比例
  </label>
  <label>
    <input type="checkbox" v-model="refreshMxg.updateFirstImg">添加/更新首页预览图
  </label>
  <label>
    <input type="checkbox" v-model="refreshMxg.isUpdate">删除原先所有图片然后重新添加
  </label>
  <p v-show="isUse">当前图片选项已经应用</p>
  <p v-show="!isUse">当前图片选项未使用</p>
  <p>请注意:刷新操作将会覆盖掉所有未保存的信息,图片信息修改与其他信息之间是独立的</p>

  <button @click="refresh" type="button">刷新</button>
  <div>
    <div v-if="F5">
      <image-cropping :size="String(refreshMxg.imgSize)" :freeProportion="refreshMxg.freeProportion" minHeight="100"
                      minWidth="100"
                      :formDataMsg="formDataMsg"
                      :proportion="String(16/9)" :UPURl="uploadUrl"/>
    </div>
  </div>
</template>
<script setup lang="ts">
import {computed, nextTick, ref, watch} from "vue";
import {globalConst} from "@constants/globalConst.js";
import ImageCropping from "@utils/image-cropping.vue";
import {useGlobalConfirm} from "@utils/ConfirmDialogPlugin.js";

const props = defineProps<{
  rId: number,
}>()

let F5 = ref(true)
const refreshMxg = ref({
  imgSize: 4,
  freeProportion: false,
  updateFirstImg: false,
  isUpdate: false,
})
const formDataMsg = ref(new Map())
let id: number | string
id = Number(props.rId || -1)
if (id === -1) {//如果没拿到ID就不渲染了
  throw Error('不存在的ID!')
}
const isUse = ref(true)
const oldSize = ref(4)
formDataMsg.value.set('atResource', id)
formDataMsg.value.set('updateFirstImg', refreshMxg.value.updateFirstImg)

async function refresh() {
  const r = useGlobalConfirm()
  const b = await r("您确定要刷新吗?此操作将会丢失当前所有已选择的图片", {
    title: '是否刷新',
  })
  if (!b)
    return
  F5.value = false
  await nextTick()
  F5.value = true
  isUse.value = true
}

const defSize = 4
formDataMsg.value.set('atResource', id)
// watch(refreshMxg, () => {
//   if (refreshMxg.value.imgSize <= 1 || refreshMxg.value.imgSize > 100) {
//     alert('错误的图片数量设置!当前允许的图片数量范围为2-100张,图片数量已经自动重置')
//     if (defSize !== oldSize.value)
//       isUse.value = false
//     refreshMxg.value.imgSize = 4
//     return
//   }
//   oldSize.value = refreshMxg.value.imgSize
//   isUse.value = false
//   formDataMsg.value.clear()
//   formDataMsg.value.set('atResource', id)
//   formDataMsg.value.set('updateFirstImg', refreshMxg.value.updateFirstImg)
// }, {deep: true})
// 防抖函数（如果不想引入lodash）
const debounce = (func, wait) => {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};

// 创建防抖版本的处理函数
const handleRefreshMxgChange = debounce(() => {
  if (refreshMxg.value.imgSize <= 1 || refreshMxg.value.imgSize > 100) {
    alert('错误的图片数量设置!当前允许的图片数量范围为2-100张,图片数量已经自动重置');
    if (defSize !== oldSize.value)
      isUse.value = false;
    refreshMxg.value.imgSize = 4;
    return;
  }
  oldSize.value = refreshMxg.value.imgSize;
  isUse.value = false;
  formDataMsg.value.clear();
  formDataMsg.value.set('atResource', id);
  formDataMsg.value.set('updateFirstImg', refreshMxg.value.updateFirstImg);
}, 500); // 延迟500毫秒

watch(refreshMxg, handleRefreshMxgChange, {deep: true});
const uploadUrl = computed(() =>
    refreshMxg.value.isUpdate
        ? globalConst.baseUrl + 'user/resources/updateFile/img'
        : globalConst.baseUrl + 'user/resources/addFile/img'
);
</script>
<style scoped>

</style>
